<template>
    <div class="phone-btn-box" :style="bgColor + effect + padding">
        <Hover v-if="hover.showHover" :brickInfo="brickInfo" :hover="hover"/>
        <div class="phone-btn"
             :style="base"
             @click="phoneTo(content.phoneNum);">
            <!--<a :href="`tel://${content.phoneNum}`">-->
            <i class="el-icon-phone"/>
            {{content.value}}
            <!--</a>-->
        </div>
    </div>
</template>

<script>
    import Hover from '../common/mainpage/Hover.vue';
    import Stats from '../stats.js';

    export default {
        name: 'YXPhone',
        props: {
            hover: {
                type: Object,
                default: _ => {
                    return {
                        showHover: false,
                        brickHover: true,
                        isSaved: true
                    };
                }
            },
            isEdit: {
                type: Boolean,
                default: false
            },
            brickInfo: {
                type: Object,
                default: _ => {
                    return {
                        active: false
                    };
                }
            },
            content: {
                type: Object,
                default: _ => {
                    return {
                        value: '按钮文本',
                        phoneNum: ''
                    };
                }
            },
            appearance: {
                type: Object,
                default: _ => {
                    return {
                        base: {
                            width: 90,
                            height: 44,
                            btnColor: {
                                color: 'rgba(253, 65, 95, 1)'
                            },
                            bgColor: {
                                color: 'rgba(255, 255, 255, 0)'
                            },
                            color: {
                                color: 'rgba(255, 255, 255, 1)'
                            },
                            size: '18',
                            radius: '4'
                        },
                        effect: {
                            value: ''
                        },
                        padding: {
                            top: 0,
                            right: 0,
                            bottom: 0,
                            left: 0
                        }
                    };
                }
            },
            shortIndex: {
                type: String,
                default: ''
            }
        },
        components: {
            Hover
        },
        computed: {
            bgColor() {
                return `background-color: ${this.appearance.base.bgColor.color};`;
            },
            base() {
                let b = this.appearance.base;
                let width = `width: ${b.width}%;`;
                let height = `height: ${b.height}px;`;
                let lineh = `line-height: ${b.height}px;`;
                let btnColor = `background-color: ${b.btnColor.color};`;
                let color = `color: ${b.color.color};`;
                let size = `font-size: ${b.size}px;`;
                let radius = `border-radius: ${b.radius}px;`;

                return width + height + lineh + btnColor + color + size + radius;
            },
            effect() {
                let ev = this.appearance.effect.value;

                if (ev) {
                    if (this.isEdit) {
                        return `position: absolute;${ev}: 0;z-index: 2000;`;
                    } else {
                        return `position: fixed;${ev}: 0;z-index: 2000;`;
                    }
                }
                return '';
            },
            padding() {
                let p = this.appearance.padding;
                return `padding: ${p.top}px ${p.right}px ${p.bottom}px ${p.left}px;`;
            }
        },
        methods: {
            phoneTo(phoneNum) {
                if (phoneNum) {
                    let _a = document.createElement('a');
                    _a.href = `tel://${phoneNum}`;
                    document.body.appendChild(_a);
                    _a.click();
                    document.body.removeChild(_a);
                    if (this.shortIndex) {
                        Stats.sendRequest('h5_phone_click', this.shortIndex);
                    }
                }
            }
        }
    }
</script>

<style scoped lang="scss">
    .phone-btn-box {
        position: relative;
        width: 100%;
        text-align: center;
        display: flex;
        justify-content: center;
        z-index: 9;

        .phone-btn {
            font-size: 20px;
            font-weight: bold;
            cursor: pointer;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }
</style>
